<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/3 0003
  Time: 23:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="<%=request.getContextPath()%>/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link href="<%=request.getContextPath()%>/css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link href="<%=request.getContextPath()%>/css/codemirror/codemirror.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/codemirror/ambiance.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/foot.css" />
    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/loading.css" rel="stylesheet" type="text/css">



    <link rel="stylesheet" href="<%=request.getContextPath()%>/codemirror/codemirror.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/codemirror/theme/dracula.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/codemirror/addon/hintow-hint.css">
    <link rel="stylesheet" type="texts" href="<%=request.getContextPath()%>/layuis/layui.css">

    <script src="<%=request.getContextPath()%>/codemirror/codemirror.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/mode/groovy/groovy.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/mode/clike/clike.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/addon/hintow-hint.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/addon/hint/sql-hint.js"></script>

    <script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>

    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body style="">



<%--导航条--%>
<%@include file="../common/nav.jsp"%>

<div class="container-fluid"  style="background-color: white ">
    <div class="col-md-12" >
        <p style="float: left; font-size: 20px;font-weight: bold;margin-left: 10px"><b>编程题</b> </p>
        <div class="time" style="float: left;margin-left:85%; height: 30px; line-height:30px; border-radius:15px;font-size:20px;color:#cc3227;"> </div>
    </div>
    <div class="col-md-12" style="border-bottom: black 1px solid"></div>
    <div class="col-md-12" style="height: 10px"></div>
</div>


<div class="container-fluid"  style="height:80%;background-color: white" >

    <%--题目展示区--%>
    <div class="col-md-4" >
        <div style="">
            <div style="height: 15%">
                <p id="qId" style="font-size: 19px;font-weight: bold;margin-left: 10px"></p>
                <div id="stem" style="font-size: 14px; font-weight: bolder;"></div>
            </div>
            <div style="margin-top: 10%">
                <p style="font-size: 18px;font-weight: bold;margin-left: 10px"><b>示例</b> </p>
                <div style="height: 25%;background-color: #F5F5F5;margin-top: 5px">
                    <p style="font-size: 15px;font-weight: bold;margin-left: 10px">输入 :</p>
                    <p id="input" style="margin-left: 10px;font-size: 13px;font-weight: bold;width: 95%; margin: 0 auto;"></p>
                </div>
                <div style="height: 30%;background-color: #F5F5F5;margin-top: 3%">
                    <p style="font-size: 15px;font-weight: bold;margin-left: 10px">输出 :</p>
                    <p id="out" style="margin-left: 10px;font-size: 13px;font-weight: bold;width: 95%; margin: 0 auto;"></p>

                </div>
            </div>
        </div>
    </div>
    <%--题目展示区结束--%>

    <%--编程区--%>
    <div class="col-md-8" style="height: 100%;">
        <div class="box" style="border: #93a490 5px solid">
            <textarea class="form-control" id="code" name="code"style="font-size: 20px;"></textarea>
            <script>
                var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                    mode: "text/groovy",
                    mode: "text/x-java", //实现Java代码高亮
                    lineNumbers: true,	//显示行号
                    theme: "dracula",	//设置主题
                    lineWrapping: true,	//代码折叠
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    matchBrackets: true,	//括号匹配
                    className: "codemirror"
                });
                editor.setSize('100%','90%')
                editor.setOption();
            </script>
        </div>

        <div id="result" style="color: black"></div>
        <div id="judgment" style=" font-size: 20px;font-weight: bolder; color: red"></div>

    </div>
    <%--编程区结束--%>
</div>
<div style="float: right;margin-right: 2%;">
    <button type="button" id="up" class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">上一题</button>
    <button type="button" id="down" class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">下一题</button>
    <button type="button" id="run" class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">点击运行</button>
    <button type="button" id="submit" class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">提交</button>
</div>

<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<script src="../js/codemirror.js"></script>
<script src="../js/mode/clike/clike.js"></script>

<script>


    var timeState = true;//时间状态 默认为true 开启时间
    var parper= ${parper};
    var questions = parper.programmingList;
    var testId = parper.testId;
    console.log(testId);
    console.log(questions);
    var testId = parper.testId;//考试号
    console.log(testId);
    var checkQues = []; //已做答的题的集合
    let emp  = "<span>答案不能为空</span> ";

    /*实现计时器*/
    setInterval(function () {
        if (timeState) {
            var testEnd = parper.testEnd;//考试结束时间
            var nowDate = new Date();//现在的时间
            var nowTime = nowDate.getTime();//现在的long毫秒数
            var countDown = (testEnd - nowTime)/1000;//剩余时间秒数

            var hour = Math.floor(countDown / 3600);//小时
            countDown %= 3600;//小时后余下的秒数
            var minute  = Math.floor(countDown / 60);//分钟
            countDown %= 60;//余下秒数
            var second  = Math.floor(countDown);//秒
            var str ="倒计时 " +  hour + ":" + minute + ":" + second;
            $(".time").text(str);
        } else {
            $(".time").text(str);
        }
    }, 1000);//每秒刷新一次

    //展示考卷信息
    function showQuestion(id){
        editor.setValue(" ");//清除输入框
        $("#result").empty();

        //当前操作的考题编号 = id
        activeQuestion = id;
        //     第id个json
        var question = questions[id];
        /**
         展示题目
         */


        $("#qId").html("第"+(activeQuestion+1) +"/"+questions.length+"题");//题目
        $("#stem").html(question.proStem);//题目
        $("#input").html(question.proInput);//示例输入
        $("#out").html(question.proAnswer);//示例输出

        /**
         * 展示选项
         */
        //ul  设置ul的id值为question0,1,2,3...
        $(".box").attr("id","box"+id);
        //     for循环    已经作答的题目集合
        for(var i=0;i<checkQues.length;i++){
            // 已经作答的id等于  传进来的id
            if(checkQues[i].id==id){
                //回显用户的答案
                var answer = checkQues[i].answer;
                editor.setValue(answer);//清除输入框
                $("#"+checkQues[i].item).val(checkQues[i].answer)
                $("#result").html(checkQues[i].result)
            }
        }
    }

    /*保存考题状态 已做答的状态*/
    function save(){
        //获取用户输入的答案
        let useAnswer = editor.getValue();//提取输入框的代码
        var result = $("#result").html();//运行结果

        if (useAnswer != " ") {
            //第一次进来
            if (checkQues.length == 0) {
                var check = {};
                check.queId = questions[activeQuestion].proId; //题库中题目编号
                check.id = activeQuestion;//获取当前考题的编号
                check.box = "box" + activeQuestion;
                check.answer = useAnswer;//用户的答案
                check.result = result;//运行结果
                checkQues.push(check);//添加到已经作答题目集合
            } else {//不是第一次进来
                for (var i = 0; i < checkQues.length; i++) {
                    if (checkQues[i].id != activeQuestion) {                    //题目已经存在
                        //新建一个集合，然后将集合放入数组
                        var check = {};
                        check.queId = questions[activeQuestion].proId; //题库中题目编号
                        check.id = activeQuestion;//获取当前考题的编号
                        check.box = "box" + activeQuestion;
                        check.answer = useAnswer;//用户的答案
                        check.result = result;//运行结果
                        checkQues.splice(activeQuestion,1,check);//添加到已经作答题目集合
                    }
                }
            }
        }
        console.log(checkQues)
    }



    $(function(){
        //展示考卷信息
        showQuestion(0);

        //点击运行按钮,将代码发送到ParperAction,在后台运行完后将运行结果返回回来
        $("#run").click(function () {
            let value = editor.getValue();//提取输入框的代码
            //传两个数据   代码和语言类型
            $.post("/yuezhi/parper/comp",{"code":value,"lang":"java"},function (data) {
                //将返回的运行结果写入html
                $("#result").html(data.data)
            })

        })
        //将用户答案返回后台
        $("#submit").click(function () {
            let value = editor.getValue();//提取输入框的代码
            if (value == "") {
                $("#judgment").empty();
                $("#judgment").append(emp);
            }else{
                save();
            }

            if (questions.length-(checkQues.length) == 0){
                var checkQues1 =  [];
                for (var i=0; i<checkQues.length; i++){
                    var check = {};
                    check.testId = parper.testId;//考试号
                    check.parperId = parper.parperId;//试卷号
                    check.queType = 4;//题目类型
                    check.queId = checkQues[i].queId; //题库中题目编号
                    check.id = checkQues[i].id + 1;//获取当前考题的编号
                    check.answer = checkQues[i].result;//用户的答案
                    checkQues1.push(check);//添加到已经作答题目集合
                }
                var checkQues2 = JSON.stringify(checkQues1);//将复制的数组转化为json字符串
                console.log("checkQues2"+checkQues2)

                $.post("/yuezhi/parper/wrongtopicadd",{"checkQues":checkQues2},function (data) {
                    if (data != 0){
                        var testId = parper.testId;
                        window.location="/yuezhi/parper/wrong/"+testId ;
                    }
                })
            } else{
                alert("已做答:"+(checkQues.length)+"道题,还有"+(questions.length-(checkQues.length))+"道题未完成");
            }
        })

        //上一题
        $("#up").click(function(){
            if((activeQuestion-1) >= 0) {
                showQuestion(activeQuestion-1)
            }
            else if ((activeQuestion - 1) == questions.length){
                // 展示考卷信息
                showQuestion(activeQuestion)
            }
        })

        //进入下一题
        $("#down").click(function(){
            $("#judgment").empty();
            //1. 获取用户填入的数据
            let value = editor.getValue();//提取输入框的代码
            console.log(value)
            if (value == " ") {
                console.log("空")
                $("#judgment").append(emp);
            }
            else if (value != " ") {
                var result = $("#result").html();//运行结果
                if(result != ""){
                    console.log("运行")
                    save();
                    editor.setValue(" ");//清除输入框
                    if ((activeQuestion + 1) != questions.length) {showQuestion(activeQuestion + 1)}
                    else if((activeQuestion + 1) == questions.length){
                        showQuestion(activeQuestion);
                    }
                    $("#judgment").empty();
                }else{
                    alert("请先运行");
                }
            }
        })

        //如果考试时间结束
        var testEnd = parper.testEnd;//考试结束时间
        var nowDate = new Date();//现在的时间
        var nowTime = nowDate.getTime();//现在的long毫秒数
        var countDown = (testEnd - nowTime)/1000;//剩余时间秒数
        // var countDown = 0;
        if (countDown  <= 0){
            var checkQues1 =  [];
            for (var i=0; i<checkQues.length; i++){
                var check = {};
                check.testId = parper.testId;//考试号
                check.parperId = parper.parperId;//试卷号
                check.queType = 4;//题目类型
                check.queId = checkQues[i].queId; //题库中题目编号
                check.id = checkQues[i].id + 1;//获取当前考题的编号
                check.answer = checkQues[i].result;//用户的答案
                checkQues1.push(check);//添加到已经作答题目集合
            }
            var checkQues2 = JSON.stringify(checkQues1);//将复制的数组转化为json字符串
            console.log("checkQues2"+checkQues2)
            //post请求方式将数据写入request作用域
            $.post("/yuezhi/parper/wrongtopicadd",{"checkQues":checkQues2},function (data) {
                if (data != 0){
                    var testId = parper.testId;
                    window.location="/yuezhi/parper/wrong/"+testId ;
                }
            })
        }
    })

















</script>


</body>
</html>
